<template>
    <div class="search-lyric-box">
        <div class="lyric-item" v-for="(lyric,index) in lyrics" :key="index">
            <div class="song-info">
                <div class="song-name">
                    <div class="song-name-text">
                        <span class="info" v-html="lyric.title_hilight"></span>
                    </div>
                </div>
                <div class="singers">
                    <div class="singer-name-box" v-for="(singer,singerIndex) in lyric.singer" :key="singerIndex">
                        <span class="singer-name" v-html="singer.name" @click="toSingerDetail(singer)"
                              @dblclick.stop=""/>
                        <span class="division" v-if="singerIndex !== lyric.singer.length - 1">/</span>
                    </div>
                </div>
                <div class="album">
                    <div class="album-text">
                        <span class="info" v-html="lyric.album.name"></span>
                    </div>
                </div>
                <div class="time">
                    <span>{{_handleTime(lyric.interval)}}</span>
                </div>
            </div>
            <div class="lyric-box">
                <div id="lyric-content" class="lyric" :class="isOpenLyric[index]?'lyric-max':''">
                    <p v-html="handleSmallLyric(lyric)"></p>
                </div>
                <div class="button-box">
                    <div class="btn open-btn" @click="openLyric(index)"> {{isOpenLyric[index]?'收起':'展开'}}歌词</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  import { handleTime } from '../../../../common/js/util'

  export default {
    name: 'm-search-lyric',
    props: {
      lyrics: {
        type: Array
      }
    },
    data () {
      return {
        isOpenLyric: []
      }
    },
    computed: {
      handleSmallLyric () {
        return (lyric) => {
          // 替换所有的换行符
          let res = `${lyric.content.replace(/\\n/g, '<br />')}`
          return res
        }
      }
    },
    methods: {
      // 处理歌曲播放时长
      _handleTime (duration) {
        return handleTime(duration)
      },
      toSingerDetail (singer) {
        singer.singerName = singer.name
        singer.singerMid = singer.mid
        this.$emit('toSingerDetail', singer)
      },
      openLyric (index) {
        this.$set(this.isOpenLyric, index, !this.isOpenLyric[index])
      }
    }
  }
</script>

<style lang="less">
    .search-lyric-box {
        width: 100%;
        margin-top: 20px;

        em {
            font-style: normal;
            color: var(--font-active-color) !important;
        }

        .lyric-item {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-flow: column;
            padding: 10px 0;

            .song-info {
                position: relative;
                padding-right: 60px;
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;

                .song-name {
                    width: 45%;

                    .song-name-text {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        width: 100%;

                        .info {
                            color: var(--font-base-color);
                        }

                        .info:hover {
                            cursor: pointer;
                            color: var(--font-active-color);
                        }
                    }
                }

                .singers {
                    width: 30%;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;

                    .singer-name-box {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        color: var(--font-base-color);

                        .division {
                            margin-right: 4px;
                        }

                        .singer-name {
                            color: var(--font-base-color);
                        }

                        .singer-name:hover {
                            cursor: pointer;
                            color: var(--font-active-color);
                        }
                    }
                }

                .album {
                    width: 25%;

                    .album-text {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        width: 100%;

                        .info {
                            color: var(--font-base-color);
                        }

                        .info:hover {
                            cursor: pointer;
                            color: var(--font-active-color);
                        }
                    }
                }

                .time {
                    position: absolute;
                    right: 0;
                    width: 60px;
                    font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    color: var(--font-tow-color);
                }
            }

            .lyric-box {
                position: relative;
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .lyric {
                    user-select: text;
                    margin-top: 5px;
                    height: 60px;
                    overflow: hidden;
                    width: 80%;
                    color: var(--font-tow-color);
                }

                ::selection {
                    color: var(--font-base-color);
                    background-color: var(--font-tow-color);
                }

                .lyric-max {
                    min-height: 60px;
                    height: initial;
                }

                .button-box {
                    position: absolute;
                    top: 40px;
                    right: 0;
                    width: 20%;
                    display: flex;
                    justify-content: flex-end;
                    align-items: flex-start;

                    .btn {
                        margin-left: 10px;
                        color: var(--font-tow-color);
                    }

                    .btn:hover {
                        cursor: pointer;
                        color: var(--font-active-color);
                    }
                }
            }
        }
    }
</style>
